
// 渲染页面
let shopS = document.querySelector('.shopS');
let cartall = document.querySelector('.cartall');
let savetall = document.querySelector('.savetall');

render(lists);


function render(goodlist) {

    shopS.innerHTML = goodlist.map((item) => {
        let saveTotal = item.num * (item.oriPrice - item.nowPrice);
        return `
            <tr class="shopList" idx="${item.id}">
            <td class="imgTd">
                <img class="shops" src="${item.img}" alt="" srcset="">
            </td>
            <td class="titleTd">
                <h6>${item.title}</h6>
                <span>ID:#${item.id}</span>
                <span>Size:${item.size}</span>
            </td>
            <td class="Son2">
                <span class="reduce">-</span>
                <input type="text"  value="${item.num}" class="count">
                <span class="add">+</span>
            </td>
            <td class="Son3">
                <del class="oriPrice">${item.oriPrice} py6</del>
                <b class="nowPrice">${item.nowPrice} py6</b>
            </td>
            <td class="Son4">
                <span class="priceAll">${(item.nowPrice * item.num).toFixed(2)} py6</span><span>You save ${saveTotal.toFixed(2)} py6</span>
            </td>
            <td class="Son5">
                <span class="saveAll"></span>
                <img class="del" src="../images/del.png" alt="">    
            </td>
        </tr>`
    }).join('')
    // 计算总价
    var total = lists.reduce(function (pre, cur) {
        return pre + cur.nowPrice * cur.num
    }, 0)
    cartall.firstElementChild.innerHTML = total.toFixed(2) + "py6"

    //  折扣总价
    var save = lists.reduce(function (pre, cur) {
        return pre + (cur.oriPrice - cur.nowPrice) * cur.num
    }, 0)
    savetall.innerHTML = save.toFixed(2) + "py6"
}



// 事件委托绑定事件
let shop = document.querySelector('.shop');
let $tr, $id;
shop.onclick = function (e) {
    switch (e.target.className) {
        // 减法
        case "reduce":
            // 获取按钮所在tr
            $tr = e.target.parentNode.parentNode;
            // 拿到idx
            $id = $tr.getAttribute('idx');
            lists.forEach(function (item, index) {
                // 利用遍历idx和id对比
                if (item.id == $id && item.num > 1) {
                    item.num -= 1;
                    render(lists);
                }
            })
            break
        // 加法
        case "add":
            $tr = e.target.parentNode.parentNode;
            $id = $tr.getAttribute('idx');
            lists.forEach(function (item, index) {
                if (item.id == $id) {
                    item.num += 1;
                    render(lists);
                }
            })
            break
        // 删除
        case "del":
            let res = confirm("是否确定删除")
            if (res) {
                $tr = e.target.parentNode.parentNode;
                $id = $tr.getAttribute('idx');
                lists.forEach(function (item, index, arr) {
                    if (item.id == $id) {
                        arr.splice(index, 1)
                        render(lists);
                    }
                })

            }
            break

        // 控制输入框的数字
        case "count":
            tr = e.target.parentNode.parentNode
            id = tr.getAttribute("idx")
            e.target.onblur = function () {
                lists.forEach((element, index) => {
                    if (id == element.id) {
                        element.num = this.value
                        render(lists)
                    }
                });
            }
            break
    }

}